<template>
    <view class="topicItem">
        <view class="title font15 txtsHidden" @click="questionDetail(item.id)">
            <text class="fontBold">{{ item.content }}</text>
        </view>
        <block v-if="item.answer">
            <view class="userInfo flex font13 top-15" @click="questionDetail(item.id)">
                <image class="userHeader right-5" :src="item.answer.user_image" mode="aspectFill"></image>
                <text class="userName txtHidden right-5">{{ item.answer.user_nick }}</text>
            </view>
            <view class="answerBox top-15" v-if="item.answer.id" @click="questionDetail(item.id)">
                <text class="answerIcon col-fff bg-theme font12 right-5">答</text>
                {{ item.answer.content }}
            </view>
        </block>
        <view class="viewsBox flex top-15">
            <view class="viewsBtns flex font13">
                <view class="flex" @click="clickThumb(item)">
                    <u-icon :name="item.love ? 'thumb-up-fill' : 'thumb-up'" :color="item.love ? '#007235' : '#3E3A3A'"
                        size="16"></u-icon><text class="left-3">{{ item.like_num }}</text>
                </view>
                <view class="flex left-15" @click="clickCollect(item)">
                    <u-icon :name="item.store ? 'star-fill' : 'star'" :color="item.store ? '#007235' : '#3E3A3A'"
                        size="16"></u-icon><text class="left-3">{{ item.store_num }}</text>
                </view>
                <view class="flex left-15" @click="questionDetail(item.id)">
                    <u-icon name="chat" color="#3E3A3A" size="16"></u-icon><text class="left-3">{{ item.count }}</text>
                </view>
                <view class="flex left-15" @click="clickDelete(item.id)" v-if="showDelete">
                    <u-icon name="trash" color="#3E3A3A" size="16"></u-icon><text class="left-3">删除</text>
                </view>
            </view>
            <view class="lookAnswerBtn font13 col-B99354 border-B99354" @click="questionDetail(item.id)">查看回答</view>
        </view>
    </view>
</template>

<script>
import { mapState } from 'pinia';
import { useUserInfoStore } from '@/store/index';
import { checkLogin, checkUserInfo } from '@/common/common';
import { FAQThumbsUp, FAQCollect, deleteOwnerFAQ } from '@/common/api/forum';
export default {
    data() {
        return {
        }
    },
    props: {
        item: {
            value: Object,
            default: {}
        },
        index: {
            value: Number,
            default: 0
        },
        showDelete: {
            value: Boolean,
            default: false
        }
    },
    computed: {
        ...mapState(useUserInfoStore, ['userInfo'])
    },
    methods: {
        //跳转问答详情
        questionDetail(id) {
            if (!checkLogin()) {
                uni.navigateTo({
                    url: '/pages/login/login'
                })
                return
            }
            if (!checkUserInfo()) {
                uni.navigateTo({
                    url: `/pages/login/user-info-form`
                })
                return
            }
            uni.navigateTo({
                url: `/pages/tools/question/detail?id=${id}`
            })
        },

        //点击收藏
        async clickCollect(info) {
            if (!checkLogin()) {
                uni.navigateTo({
                    url: '/pages/login/login'
                })
                return
            }
            if (!checkUserInfo()) {
                uni.navigateTo({
                    url: `/pages/login/user-info-form`
                })
                return
            }
            try {
                let { status, detail } = await FAQCollect(info.id);
                if (status !== 0) {
                    uni.$u.toast(detail);
                    return;
                }
                this.$emit('collectSucc', info.id)
            } catch (error) {
                console.log(error)
            }
        },

        //点击点赞
        async clickThumb(info) {
            if (!checkLogin()) {
                uni.navigateTo({
                    url: '/pages/login/login'
                })
                return
            }
            if (!checkUserInfo()) {
                uni.navigateTo({
                    url: `/pages/login/user-info-form`
                })
                return
            }
            try {
                let { status, detail } = await FAQThumbsUp(info.id);
                if (status !== 0) {
                    uni.$u.toast(detail);
                    return;
                }
                this.$emit('thumbSucc', info.id)
            } catch (error) {
                console.log(error)
            }
        },

        //点击删除
        async clickDelete(id) {
            uni.showModal({
                title: '提示',
                content: '是否确认删除?',
                success: async function (res) {
                    if (res.confirm) {
                        try {
                            let { status, detail } = await deleteOwnerFAQ(id);
                            if (status !== 0) {
                                uni.$u.toast(detail);
                                return;
                            }
                            this.$emit("deleteSucc", id)
                        } catch (error) {
                            console.log(error)
                        }
                    }
                }
            })
        }
    }
}
</script>

<style scoped lang="scss">
.topicItem {
    padding: 28rpx;
    border-bottom: 2rpx solid rgba(0, 0, 0, .06);

    .title {
        line-height: 1.5;
    }

    .userInfo {
        line-height: 1.4;
        justify-content: flex-start;

        .userHeader {
            width: 40rpx;
            height: 40rpx;
            border-radius: 50%;
        }
    }

    .answerBox {
        line-height: 1.5;

        .answerIcon {
            line-height: 1;
            display: inline-block;
            padding: 6rpx;
            border-radius: 4rpx;
        }
    }

    .authBtn {
        font-size: 26rpx;
    }

    .viewsBox {
        justify-content: space-between;

        .viewsBtns {
            justify-content: flex-start;
        }

        .lookAnswerBtn {
            padding: 10rpx 20rpx;
            border-radius: 10rpx;
        }
    }
}
</style>
